<template>
	<div class="footer border-top ">
	  	<router-link tag="div" class="footer-item" to="/msite">
	  		<span class="footer-link  iconfont icon-u"></span>
	  		<span class="text">商家</span>
	  	</router-link>
	  	<router-link tag="div" class="footer-item" to="/search">
	  		<span class="footer-link iconfont icon-sousuo1"></span>
	  		<span class="text">搜索</span>
	  	</router-link>
	  	<router-link tag="div" class="footer-item" to="/order">
	  		<span class="footer-link iconfont icon-dingdan1"></span>
	  		<span class="text">订单</span>
	  	</router-link>
	  	<router-link tag="div" class="footer-item" to="/profile">
	  		<span class="footer-link iconfont icon-geren2"></span>
	  		<span class="text">个人</span>
	  	</router-link>
	  </div>
</template>

<script>
	export default{

	}
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin.styl'
.footer
  border-top(rgba(7,17,27,0.1))
  position fixed
  z-index 100
  left 0
  right 0
  bottom 0
  background-color #fff
  display: flex
  height: 50px
  width 100%
  .footer-item
  	display flex
  	flex: 1
  	text-align: center
  	flex-direction column
  	align-items center
  	.footer-link
  	  padding 7px 0px
  	  color: #ccc
  	.text
  		font-size 10px
  	&.router-link-active
  	  .footer-link
  	  	color: $yellow
  	  .text
  	  	color: $yellow
  	  	
</style>